<template>
    <div class="signin" style='background-image: url("static/images/sign_bkg.jpg")'>
        <div class="calender">
            <img class="calender-img" src="static/images/sign_calender.png">
            <div class="calender-date">
                <span>{{signinStatus.date}}28日</span>
            </div>
        </div>
        <div class="signin-content">
            <div class="signin-header">
                <span class="signin-title">福利中心</span>
                <div class="point-white-icon"></div>
                <span class="signin-intro">每日签到领积分</span>
            </div>
            <div class="signin-days">

                    <div class="signin-records">
                    <div v-for="(item,index) in signinDays" :key="index">
                        <div class="signin-item">
                            <img v-bind:src="item==0? 'static/images/signed_doc.png': 'static/images/notsign_doc.png'">
                            <p>{{index}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="signin-number">
                <div class="person-white-icon"></div>
                <span>已有{{signinStatus.counts}}人领取</span>
            </div>
        </div>
        <div class="signin-btn"  @click="userSignin">
            <img src="static/images/sign_btn.png" alt="">
            <div class="signin-btninfo">
                <span>{{isSigned===true?'已签到':'签 到'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Signin",
        props:{
            isSigned: {
                type:Boolean,
                default:false
            },
            signinDays: Array,
            signinStatus: Object,
            signinPercent: {
                type:Number,
                default:0
            },
        },
        methods:{
            userSignin(){

            },
        }
    }
</script>

<style scoped>
    .signin {
        display: flex;
        flex-direction: row;
        border-top: 1px solid rgba(229, 229, 229, 1);
        border-bottom: 1px solid rgba(229, 229, 229, 1);
        height: 168px;
        padding: 20px 19px;
    }

    .calender {
        position: relative;
    }

    .calender-img {
        width: 136px;
        height: 123px;
        background-size: 100% 100%;
    }

    .calender-date {
        position: absolute;
        width: 136px;
        top: 57px;
        left: 0;
        color: #D52D1D;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        display: flex;
        flex-direction: row;
    }

    .calender-date span {
        width: 136px;
        text-align: center;
    }

    .signin-content {
        display: flex;
        flex-direction: column;
        width: 415px;
        margin-left: 30px;
        font-size: 24px;
        color: #fff;
    }

    .signin-header {
        display: flex;
        flex-direction: row;
    }

    .signin-header .signin-title {
        font-size: 24px;
        font-weight: bolder;
        line-height: 24px;
        margin-right: 20px;
    }

    .point-white-icon {
    }

    .signin-header .signin-intro {
        margin-left: 5px;
        line-height: 24px;
        font-size: 20px;
    }

    .signin-content .signin-records {
        margin: 6px 0;
    }

    .signin-btn {
        margin-top: 5px;
        margin-left: 20px;
        width: 113px;
        height: 113px;
        position: relative;
    }

    .signin-btn img {
        width: 113px;
        height: 113px;
    }

    .signin-btn .signin-btninfo {
        font-size: 24px;
        color: #ED3A1D;
        font-weight: 900;
        position: absolute;
        display: flex;
        flex-direction: row;
        width: 113px;
        height: 113px;
        top: 0;
        left: 0;
    }

    .signin-btninfo span {
        line-height: 113px;
        width: 113px;
        text-align: center;
    }

    .signin-days {
        position: relative;
    }

    .signin-progress-red {
        position: absolute;
        top: 30px;
        width: 415px;
        height: 14px;
        background-color: #D3371E;
        border-radius: 7px;
    }

    .signin-progress-white {
        position: absolute;
        top: 30px;
        width: 0px;
        height: 14px;
        background-color: #FFFFFF;
        border-radius: 7px;
    }

    .signin-records {
        position: absolute;
        top: 20px;
        display: flex;
        flex-direction: row;
    }

    .signin-item {
        display: flex;
        flex-direction: column;
        margin-right: 45px;
        width: 23px;
        text-align: center;
    }

    .signin-item img {
        width: 23px;
        height: 23px;
    }

    .signin-item span {

    }

    .signin-number {
        margin-top: 90px;
        display: flex;
        flex-direction: row;
        font-size: 20px;
    }

    .signin-number .person-white-icon {
        margin-top: 2px;
    }

    .signin-number span {
        line-height: 24px;
    }
</style>
